<template>
	<h3>2.显示计算属性</h3>
	<button @click="changemsg">点击修改</button>
	<p>msg的值{{msg}}</p>
	<p>newmsg的值：{{newmsg}}</p>
	<hr />
	<h3 ref="price">计算商品的价格</h3>
	<p>商品价格：{{good.price}}元</p>
	<button @click="updateprice">修改价格</button>
	<p>商品数量：{{num}} 部</p>
	<input type="text" v-model="num" />
	<p>商品总价格：{{totalprice}}元</p>
</template>

<script setup>
	import {computed,ref,reactive} from 'vue'
	// import { reactive } from 'vue/dist/vue'
	const msg = ref('初始数据')
	const m = ref('')
	const changemsg=()=>{
		msg.value='数据修改了'
	}
	const newmsg = computed(()=>{
		m.value=msg.value+'计算属性'
		return m.value='通过计算属性数据修改了'
	})
	
	/* data(){
		name:'手机'
		price:3000
	} */
	const good =reactive({
		name:'手机',
		price:3000,
	})
	const updateprice=function(){
		good.price=2888
	}
	const num=ref(1)
	const totalprice=computed(()=>{
		return num.value*good.price
	})
	ref
</script>

<style>
</style>